<template>
  <div>
    <Portlet class="show">
      <table class="table show-table">
        <tbody>
        <tr>
          <td width="140">支付单号：</td>
          <td width="20%">{{paymanagementInfo.payCode}}</td>
          <td width="140">费用数量：</td>
          <td width="20%">{{paymanagementInfo.allNum}}</td>
          <td width="140">发起账号：</td>
          <td width="20%">{{paymanagementInfo.foundPhone}}</td>
          <td width="140">发起时间：</td>
          <td width="20%">{{paymanagementInfo.foundTime | unixTimestampFilter}}</td>
        </tr>
        <tr>
          <td>通过费用：</td>
          <td>{{paymanagementInfo.orderNum}}项</td>
          <td>通过金额：</td>
          <td>{{paymanagementInfo.orderAllMoney}}元</td>
          <td>驳回费用</td>
          <td>{{paymanagementInfo.backOrderNum}}项</td>
          <td>驳回金额</td>
          <td>{{paymanagementInfo.backOrderMoney}}元</td>
        </tr>
        </tbody>
      </table>
    </Portlet>
    <el-col :span="24" class="col-xs-12">
      <el-card class="search-form">
      <el-form ref="searchForm" class="el-form-col" :model="search">
        <el-row :gutter="15" style="position:relative;">
          <el-col :lg="4" :md="6">
            <el-form-item prop="fhbOrderNo" style="position: relative">
              <el-input v-model="search.fhbOrderNo" type="textarea" :rows="4" placeholder="订单号  (支持多单查询，用英文逗号分隔)"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item prop="fhbOutOrderNo" style="position: relative">
              <el-input v-model="search.fhbOutOrderNo" type="textarea" :rows="4" placeholder="来源单号  (支持多单查询，用英文逗号分隔)"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item prop="consigneeName">
              <el-input v-model="search.consigneeName" placeholder="收件人" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
            <el-form-item>
              <el-row class="search-btns" :gutter="5">
                <el-col :span="8">
                  <el-button type="success" :loading="searchLoading" plain @click="searchFunc(search)"><span>搜索</span></el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button @click="resetFields" plain>重置</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item prop="consigneePhone">
              <el-input v-model="search.consigneePhone" placeholder="收件电话" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item prop="address">
              <cascade-address :level="3" changeOnSelect v-model="search.address" placeholder="收件地址:省/市/区"></cascade-address>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
            <el-form-item>
              <el-row class="search-btns" :gutter="5">
                <el-col :span="8">
                  <el-button type="success" :loading="searchLoading" plain @click="searchFunc(search)"><span>搜索</span></el-button>
                </el-col>
                <el-col :span="8">
                  <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                </el-col>
                <el-col :span="8">
                  <el-button @click="resetFields" plain>重置</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item prop="serviceNo">
              <el-select v-model="search.serviceNo" clearable placeholder="服务类型">
                <el-option
                  v-for="item in serviceArr"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item prop="costTypeNo">
              <el-select v-model="search.costTypeNo" clearable placeholder="费用类型">
                <el-option
                  v-for="item in costTypeArr"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item prop="costName">
              <el-input v-model="search.costName" placeholder="费用名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item prop="orderSource">
              <el-select v-model="search.orderSource" clearable placeholder="订单来源">
                <el-option
                  v-for="item in orderSourceArr"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <div v-show="isOpen">
            <el-col :lg="4" :md="6">
              <el-form-item prop="colorFlag">
                <el-select v-model="search.colorFlag" filterable placeholder="订单标记">
                  <el-option v-for="item in colorArr"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="startOrderCreateTime">
                <el-date-picker type="date"
                                placeholder="下单开始日期"
                                value-format="yyyy-MM-dd"
                                v-model="search.startOrderCreateTime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="endOrderCreateTime">
                <el-date-picker type="date"
                                placeholder="下单结束日期"
                                v-model="search.endOrderCreateTime"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </div>
        </el-row>
      </el-form>
    </el-card>
    </el-col>
    <el-col :span="24" class="col-xs-12">
      <BasicTable
        ref="BasicTable"
        url="/ms-fahuobao-order/pay-management/find-pay-package-item"
        :columns="columns"
        :tabs="tabs"
        :initParams="{
          packageId: id, tabState: 1
        }"
        :showButtonGroup="false"
        @selection-change="selectionChange"
      >
        <template slot="buttons">
          <el-button type="primary" :loading="costLoading" @click="markPassOrReject('pass')">标记通过</el-button>
          <el-button type="primary" :loading="costLoading" @click="markPassOrReject('reject')">标记驳回</el-button>
          <el-button type="primary" :loading="costLoading" @click="sendApprove">提交审批结果</el-button>
        </template>
        <template slot="preColumn">
          <el-table-column prop="fhbOrderNo" fixed="left" width="170px" align="center" label="订单号">
            <template slot-scope="scope">
              <a href="javascript:;" class="blue-color" @click="show(scope.row)">{{ scope.row.fhbOrderNo }}</a>
              <span v-if="scope.row.colorFlag && scope.row.colorFlag !== 'gray'" :style="{'font-size':'20px', 'color': 'scope.row.colorFlag'}"><i class="fa fa-flag" ></i></span>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </div>
</template>

<script>
import {filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import {copy, dotData, alert} from '@/utils'
import {getFhbServiceType, getFhbOrderSource, getSubDictListOfParentCode} from '@/utils/selectOptions'
export default {
  name: 'paymentApproveApproveShow',
  data() {
    let columns = [
      {
        label: '费用流水',
        data: 'payNumber'
      },
      {
        label: '费用类型',
        data: 'costType'
      },
      {
        label: '费用名',
        data: 'costName'
      },
      {
        label: '费用金额',
        data: 'money',
        render(data, full) {
          return data
        }
      },
      {
        label: '审批结果',
        data: 'tabStatus',
        render(data, full) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '来源单号',
        data: 'fhbOutOrderNo'
      },
      {
        label: '订单来源',
        data: 'orderSource',
        render(data, full) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '下单时间',
        width: '134px',
        data: 'orderCreateTime',
        render: (data, full) => {
          return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm:ss')
        }
      },
      {
        label: '服务类型',
        data: 'service'
      },
      {
        label: '收件人',
        data: 'consigneeName'
      },
      {label: '收件电话', data: 'consigneePhone'},
      {
        label: '收件地址',
        data: '',
        render(data, full) {
          return `${full.province} ${full.city} ${full.district}`
        }
      }
    ]
    return {
      id: this.$route.params.id,
      paymanagementInfo: {},
      visible: false,
      visibleResult: false,
      subOrderFinish: '',
      params: {
        pageSize: 10,
        pageNum: 1
      },
      isOpen: false,
      searchLoading: false,
      checkedData: [],
      search: {
        fhbOrderNo: '',
        fhbOutOrderNo: '',
        serviceNo: '',
        costTypeNo: '',
        costName: '',
        consigneeName: '',
        consigneePhone: '',
        address: [],
        orderSource: '',
        colorFlag: '',
        startOrderCreateTime: '',
        endOrderCreateTime: ''
      },
      costLoading: false,
      serviceArr: [],
      orderSourceArr: [],
      checkOrderArr: [],
      costTypeArr: [],
      colorArr: [
        {text: '红色', value: 'red'},
        {text: '橙色', value: 'orange'},
        {text: '黄色', value: 'yellow'},
        {text: '绿色', value: 'green'},
        {text: '蓝色', value: 'blue'}
      ],
      columns: columns,
      tabs: []
    }
  },
  created() {
    getFhbServiceType().then(data => {
      this.serviceArr = data
    })
    getFhbOrderSource().then(data => {
      this.orderSourceArr = data
    })
    getSubDictListOfParentCode('FUWU').then(data => {
      this.costTypeArr = data
    })
    this.getpaymanagementInfo()
  },
  methods: {
    selectionChange(arr) {
      this.checkedData = arr
    },
    searchFunc() {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let data = copy(this.search)
        data.provinceNo = dotData(data.address, '[0]') || ''
        data.cityNo = dotData(data.address, '[1]') || ''
        data.districtNo = dotData(data.address, '[2]') || ''
        delete data.address
        this.searchLoading = true
        basicTable.search(data).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    show(data) {
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    getpaymanagementInfo() {
      this.$ajax.get('/ms-fahuobao-order/pay-management/find-pay-package-item-head', {
        packageId: this.id,
        tabState: 1
      }).then(response => {
        if (response) {
          this.paymanagementInfo = response.data
        }
      })
    },
    markPassOrReject(type) {
      this.costLoading = true
      let typeStr = ''
      let tabStatus = ''
      if (type === 'pass') {
        typeStr = '通过'
        tabStatus = 'P-250'
      } else if (type === 'reject') {
        typeStr = '驳回'
        tabStatus = 'P-400'
      }

      if (this.checkedData.length === 0) {
        alert('请选择需要标记' + typeStr + '的订单！', '提示', 'warning')
        this.costLoading = false
        return
      }
      let itemList = []
      for (let i = 0; i < this.checkedData.length; i++) {
        itemList.push(this.checkedData[i].packageItemId)
      }
      // 构造提交参数
      let auditTab = {
        pageId: this.id,
        tabStatus: tabStatus,
        packageItemIdList: itemList
      }
      this.$ajax.post('/ms-fahuobao-order/pay-management/update-tab', auditTab).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.$confirm('标记成功', '提示', {
            type: 'success',
            showCancelButton: false,
            closeOnClickModal: false
          }).then(_ => {
            this.costLoading = false
            this.getpaymanagementInfo()
            this.searchFunc(this.search)
          })
        } else {
          this.costLoading = false
        }
      })
    },
    sendApprove() {
      let rejectNum = 0
      let tableData = this.checkedData
      if (Array.isArray(tableData)) {
        tableData.forEach(v => {
          if (v.tabStatus === 'P-400') {
            rejectNum++
          }
        })
      }
      this.costLoading = true
      // 提交
      this.$confirm('确认是否提交付款单' + this.paymanagementInfo.payCode + '的审批结果?<br>提交后该付款单将可以支付<br>其中有' + rejectNum + '单被标记为"驳回"，提交后该笔费用将退回"待发起"', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        this.$ajax.post('/ms-fahuobao-order/payPackage/modifyPackageStatus', {packageId: this.id, tabState: 1}).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            this.$confirm('发起审批成功', '提示', {
              type: 'success',
              showCancelButton: false,
              closeOnClickModal: false
            }).then(_ => {
              this.costLoading = false
              this.$router.push({path: '/redirect/ss-fhb/paymentApprove/approve/index'})
            })
          } else {
            this.costLoading = false
          }
        })
      }).catch(() => {
        this.costLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
